<template>
  <div class="knowledge-base-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <span class="title-icon">📖</span>
          知识库
        </h1>
        <p class="page-subtitle">海量技术文档、教程和资源，助您快速提升技能</p>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <div class="search-container">
        <div class="search-box">
          <input 
            v-model="searchQuery"
            type="text" 
            placeholder="搜索知识内容..."
            class="search-input"
            @input="handleSearch"
          />
          <button class="search-btn" @click="handleSearch">
            <span class="search-icon">🔍</span>
          </button>
        </div>
        
        <div class="filter-tabs">
          <button 
            v-for="tab in filterTabs"
            :key="tab.id"
            class="filter-tab"
            :class="{ active: activeFilter === tab.id }"
            @click="setActiveFilter(tab.id)"
          >
            <span class="tab-icon">{{ tab.icon }}</span>
            <span class="tab-text">{{ tab.text }}</span>
            <span class="tab-count">{{ tab.count }}</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 知识分类 -->
      <div class="categories-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="section-icon">📂</span>
            知识分类
          </h2>
        </div>

        <div class="categories-grid">
          <div 
            v-for="category in knowledgeCategories"
            :key="category.id"
            class="category-card"
            :class="{ active: selectedCategory === category.id }"
            @click="selectCategory(category.id)"
          >
            <div class="category-icon">{{ category.icon }}</div>
            <div class="category-info">
              <h3 class="category-name">{{ category.name }}</h3>
              <p class="category-description">{{ category.description }}</p>
              <div class="category-stats">
                <span class="stat-item">
                  <span class="stat-icon">📄</span>
                  {{ category.articleCount }} 篇文章
                </span>
                <span class="stat-item">
                  <span class="stat-icon">🎥</span>
                  {{ category.videoCount }} 个视频
                </span>
              </div>
            </div>
            <div class="category-arrow" v-if="selectedCategory === category.id">
              <span>✓</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容区域和侧边栏 -->
      <div class="content-layout">
        <!-- 知识内容列表 -->
        <div class="knowledge-content-section">
          <div class="content-header">
            <div class="content-title">
              <h2>
                <span class="content-icon">📚</span>
                {{ getSelectedCategoryName() }}知识内容
              </h2>
              <div class="sort-options">
                <select v-model="sortBy" class="sort-select" @change="handleSort">
                  <option value="latest">最新发布</option>
                  <option value="popular">最受欢迎</option>
                  <option value="rating">评分最高</option>
                  <option value="title">标题排序</option>
                </select>
              </div>
            </div>
          </div>

          <div class="knowledge-list">
            <div 
              v-for="item in filteredKnowledgeItems"
              :key="item.id"
              class="knowledge-item"
              @click="viewKnowledgeItem(item)"
            >
              <div class="item-thumbnail">
                <img 
                  v-if="item.thumbnail" 
                  :src="item.thumbnail" 
                  :alt="item.title"
                  class="thumbnail-img"
                />
                <div v-else class="thumbnail-placeholder">
                  <span class="placeholder-icon">{{ item.type === 'video' ? '🎥' : '📄' }}</span>
                </div>
                <div class="item-type-badge">
                  {{ item.type === 'video' ? '视频' : '文章' }}
                </div>
              </div>

              <div class="item-content">
                <div class="item-header">
                  <h3 class="item-title">{{ item.title }}</h3>
                  <div class="item-actions">
                    <button 
                      class="action-btn favorite-btn"
                      :class="{ active: item.isFavorite }"
                      @click.stop="toggleFavorite(item)"
                    >
                      <span class="action-icon">{{ item.isFavorite ? '❤️' : '🤍' }}</span>
                    </button>
                    <button class="action-btn share-btn" @click.stop="shareItem(item)">
                      <span class="action-icon">📤</span>
                    </button>
                  </div>
                </div>

                <p class="item-description">{{ item.description }}</p>

                <div class="item-meta">
                  <div class="meta-left">
                    <span class="meta-item">
                      <span class="meta-icon">👤</span>
                      {{ item.author }}
                    </span>
                    <span class="meta-item">
                      <span class="meta-icon">📅</span>
                      {{ formatDate(item.publishDate) }}
                    </span>
                    <span class="meta-item">
                      <span class="meta-icon">⏱️</span>
                      {{ item.duration || item.readTime }}
                    </span>
                  </div>
                  <div class="meta-right">
                    <div class="rating">
                      <span class="rating-stars">
                        <span 
                          v-for="n in 5" 
                          :key="n"
                          class="star"
                          :class="{ filled: n <= item.rating }"
                        >
                          ★
                        </span>
                      </span>
                      <span class="rating-text">{{ item.rating }}/5</span>
                    </div>
                    <span class="view-count">
                      <span class="view-icon">👁️</span>
                      {{ item.viewCount }}
                    </span>
                  </div>
                </div>

                <div class="item-tags">
                  <span 
                    v-for="tag in item.tags"
                    :key="tag"
                    class="item-tag"
                  >
                    {{ tag }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <div class="pagination" v-if="totalPages > 1">
            <button 
              class="page-btn"
              :disabled="currentPage === 1"
              @click="goToPage(currentPage - 1)"
            >
              上一页
            </button>
            <span class="page-info">
              第 {{ currentPage }} 页，共 {{ totalPages }} 页
            </span>
            <button 
              class="page-btn"
              :disabled="currentPage === totalPages"
              @click="goToPage(currentPage + 1)"
            >
              下一页
            </button>
          </div>
        </div>

        <!-- 侧边栏 - 热门推荐 -->
        <div class="sidebar">
          <div class="sidebar-section">
            <h3 class="sidebar-title">
              <span class="sidebar-icon">🔥</span>
              热门推荐
            </h3>
            <div class="hot-items">
              <div 
                v-for="item in hotItems"
                :key="item.id"
                class="hot-item"
                @click="viewKnowledgeItem(item)"
              >
                <div class="hot-item-thumbnail">
                  <img 
                    v-if="item.thumbnail" 
                    :src="item.thumbnail" 
                    :alt="item.title"
                    class="hot-thumbnail-img"
                  />
                  <div v-else class="hot-thumbnail-placeholder">
                    <span class="hot-placeholder-icon">{{ item.type === 'video' ? '🎥' : '📄' }}</span>
                  </div>
                </div>
                <div class="hot-item-content">
                  <h4 class="hot-item-title">{{ item.title }}</h4>
                  <div class="hot-item-meta">
                    <span class="hot-view-count">{{ item.viewCount }} 次浏览</span>
                    <span class="hot-rating">{{ item.rating }}/5</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="sidebar-section">
            <h3 class="sidebar-title">
              <span class="sidebar-icon">⭐</span>
              我的收藏
            </h3>
            <div class="favorite-items">
              <div 
                v-for="item in favoriteItems"
                :key="item.id"
                class="favorite-item"
                @click="viewKnowledgeItem(item)"
              >
                <div class="favorite-item-icon">{{ item.type === 'video' ? '🎥' : '📄' }}</div>
                <div class="favorite-item-content">
                  <h4 class="favorite-item-title">{{ item.title }}</h4>
                  <span class="favorite-item-date">{{ formatDate(item.favoriteDate) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KnowledgeBase',
  data() {
    return {
      searchQuery: '',
      activeFilter: 'all',
      selectedCategory: null,
      sortBy: 'latest',
      currentPage: 1,
      itemsPerPage: 10,
      filterTabs: [
        { id: 'all', text: '全部', icon: '📚', count: 1250 },
        { id: 'articles', text: '文章', icon: '📄', count: 800 },
        { id: 'videos', text: '视频', icon: '🎥', count: 450 }
      ],
      knowledgeCategories: [
        {
          id: 'frontend',
          name: '前端开发',
          icon: '💻',
          description: 'HTML、CSS、JavaScript、Vue、React等前端技术',
          articleCount: 320,
          videoCount: 180
        },
        {
          id: 'backend',
          name: '后端开发',
          icon: '⚙️',
          description: 'Java、Python、Node.js、数据库等后端技术',
          articleCount: 280,
          videoCount: 150
        },
        {
          id: 'mobile',
          name: '移动开发',
          icon: '📱',
          description: 'iOS、Android、React Native、Flutter等移动开发',
          articleCount: 150,
          videoCount: 80
        },
        {
          id: 'data',
          name: '数据科学',
          icon: '📊',
          description: '数据分析、机器学习、人工智能等技术',
          articleCount: 200,
          videoCount: 120
        },
        {
          id: 'devops',
          name: '运维开发',
          icon: '🚀',
          description: 'Docker、Kubernetes、CI/CD、监控等运维技术',
          articleCount: 120,
          videoCount: 60
        },
        {
          id: 'design',
          name: 'UI/UX设计',
          icon: '🎨',
          description: '界面设计、用户体验、设计工具等',
          articleCount: 100,
          videoCount: 50
        }
      ],
      knowledgeItems: [
        {
          id: 1,
          title: 'Vue.js 3.0 新特性详解',
          description: '深入解析Vue.js 3.0的Composition API、响应式系统、Teleport等新特性，帮助开发者快速上手最新版本。',
          type: 'article',
          author: '张三',
          publishDate: '2024-01-15',
          readTime: '15分钟',
          rating: 4.8,
          viewCount: 1250,
          tags: ['Vue.js', 'JavaScript', '前端框架'],
          thumbnail: null,
          isFavorite: false
        },
        {
          id: 2,
          title: 'React Hooks 最佳实践',
          description: '学习React Hooks的正确使用方式，包括useState、useEffect、useContext等常用Hook的最佳实践。',
          type: 'video',
          author: '李四',
          publishDate: '2024-01-12',
          duration: '25分钟',
          rating: 4.6,
          viewCount: 980,
          tags: ['React', 'Hooks', 'JavaScript'],
          thumbnail: null,
          isFavorite: true
        },
        {
          id: 3,
          title: 'Spring Boot 微服务架构设计',
          description: '从零开始构建Spring Boot微服务应用，包括服务注册、配置管理、负载均衡等核心概念。',
          type: 'article',
          author: '王五',
          publishDate: '2024-01-10',
          readTime: '20分钟',
          rating: 4.7,
          viewCount: 850,
          tags: ['Spring Boot', 'Java', '微服务'],
          thumbnail: null,
          isFavorite: false
        },
        {
          id: 4,
          title: 'Docker 容器化部署实战',
          description: '学习如何使用Docker进行应用容器化，包括镜像构建、容器编排、生产环境部署等实战技巧。',
          type: 'video',
          author: '赵六',
          publishDate: '2024-01-08',
          duration: '35分钟',
          rating: 4.9,
          viewCount: 1200,
          tags: ['Docker', '容器化', 'DevOps'],
          thumbnail: null,
          isFavorite: true
        },
        {
          id: 5,
          title: 'Python 数据分析入门指南',
          description: '使用Pandas、NumPy、Matplotlib等库进行数据分析，从数据清洗到可视化展示的完整流程。',
          type: 'article',
          author: '孙七',
          publishDate: '2024-01-05',
          readTime: '18分钟',
          rating: 4.5,
          viewCount: 750,
          tags: ['Python', '数据分析', 'Pandas'],
          thumbnail: null,
          isFavorite: false
        }
      ],
      hotItems: [
        {
          id: 101,
          title: 'ChatGPT 在编程中的应用',
          type: 'article',
          viewCount: 2500,
          rating: 4.8,
          thumbnail: null
        },
        {
          id: 102,
          title: 'Web3 开发入门教程',
          type: 'video',
          viewCount: 1800,
          rating: 4.6,
          thumbnail: null
        },
        {
          id: 103,
          title: 'TypeScript 高级类型系统',
          type: 'article',
          viewCount: 1600,
          rating: 4.7,
          thumbnail: null
        }
      ],
      favoriteItems: [
        {
          id: 2,
          title: 'React Hooks 最佳实践',
          type: 'video',
          favoriteDate: '2024-01-14'
        },
        {
          id: 4,
          title: 'Docker 容器化部署实战',
          type: 'video',
          favoriteDate: '2024-01-12'
        }
      ]
    }
  },
  computed: {
    filteredKnowledgeItems() {
      let items = this.knowledgeItems

      // 按分类筛选
      if (this.selectedCategory) {
        const category = this.knowledgeCategories.find(cat => cat.id === this.selectedCategory)
        if (category) {
          // 这里可以根据分类筛选，暂时返回所有项目
          items = items.filter(item => {
            // 简单的分类匹配逻辑
            const categoryKeywords = {
              'frontend': ['Vue.js', 'React', 'JavaScript', '前端'],
              'backend': ['Spring Boot', 'Java', '后端'],
              'mobile': ['移动', 'iOS', 'Android'],
              'data': ['Python', '数据分析'],
              'devops': ['Docker', '容器化', 'DevOps'],
              'design': ['UI', 'UX', '设计']
            }
            const keywords = categoryKeywords[this.selectedCategory] || []
            return keywords.some(keyword => 
              item.title.includes(keyword) || 
              item.tags.some(tag => tag.includes(keyword))
            )
          })
        }
      }

      // 按类型筛选
      if (this.activeFilter !== 'all') {
        const type = this.activeFilter === 'articles' ? 'article' : 'video'
        items = items.filter(item => item.type === type)
      }

      // 按搜索关键词筛选
      if (this.searchQuery.trim()) {
        const query = this.searchQuery.toLowerCase()
        items = items.filter(item => 
          item.title.toLowerCase().includes(query) ||
          item.description.toLowerCase().includes(query) ||
          item.tags.some(tag => tag.toLowerCase().includes(query))
        )
      }

      // 排序
      items.sort((a, b) => {
        switch (this.sortBy) {
          case 'latest':
            return new Date(b.publishDate) - new Date(a.publishDate)
          case 'popular':
            return b.viewCount - a.viewCount
          case 'rating':
            return b.rating - a.rating
          case 'title':
            return a.title.localeCompare(b.title)
          default:
            return 0
        }
      })

      return items
    },
    totalPages() {
      return Math.ceil(this.filteredKnowledgeItems.length / this.itemsPerPage)
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    setActiveFilter(filterId) {
      this.activeFilter = filterId
      this.currentPage = 1
    },
    selectCategory(categoryId) {
      this.selectedCategory = this.selectedCategory === categoryId ? null : categoryId
      this.currentPage = 1
    },
    getSelectedCategoryName() {
      if (!this.selectedCategory) return '全部'
      const category = this.knowledgeCategories.find(cat => cat.id === this.selectedCategory)
      return category ? category.name : '全部'
    },
    handleSort() {
      this.currentPage = 1
    },
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
      }
    },
    viewKnowledgeItem(item) {
      this.$message.info(`查看知识内容: ${item.title}`)
      // 这里可以跳转到具体的知识内容页面
    },
    toggleFavorite(item) {
      item.isFavorite = !item.isFavorite
      if (item.isFavorite) {
        this.$message.success('已添加到收藏')
      } else {
        this.$message.info('已取消收藏')
      }
    },
    shareItem(item) {
      this.$message.info(`分享: ${item.title}`)
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    }
  }
}
</script>

<style scoped>
.knowledge-base-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfd2 100%);
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.header-content {
  max-width: 800px;
  margin: 0 auto;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.title-icon {
  font-size: 3rem;
}

.page-subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin: 0;
}

/* 搜索区域 */
.search-section {
  margin-bottom: 40px;
}

.search-container {
  max-width: 1200px;
  margin: 0 auto;
}

.search-box {
  display: flex;
  max-width: 600px;
  margin: 0 auto 30px auto;
  background: white;
  border-radius: 25px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.search-input {
  flex: 1;
  padding: 16px 24px;
  border: none;
  outline: none;
  font-size: 1rem;
  background: transparent;
}

.search-btn {
  padding: 16px 24px;
  background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

.search-icon {
  font-size: 1.2rem;
}

.filter-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.filter-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: white;
  border: 2px solid #e0e6ed;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.filter-tab:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
}

.filter-tab.active {
  background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
  color: white;
  border-color: #3b82f6;
}

.tab-icon {
  font-size: 1.1rem;
}

.tab-count {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.85rem;
}

.filter-tab.active .tab-count {
  background: rgba(255, 255, 255, 0.2);
}

/* 主要内容区域 */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 内容布局 */
.content-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
}

/* 知识分类 */
.categories-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.section-header {
  text-align: center;
  margin-bottom: 30px;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.section-icon {
  font-size: 2rem;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.category-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 2px solid #e0e6ed;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.category-card:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.category-card.active {
  border-color: #3b82f6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 58, 138, 0.1) 100%);
}

.category-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
  border-radius: 50%;
  color: white;
}

.category-info {
  flex: 1;
}

.category-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.category-description {
  font-size: 0.9rem;
  color: #7f8c8d;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.category-stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: #7f8c8d;
}

.stat-icon {
  font-size: 0.9rem;
}

.category-arrow {
  font-size: 1.5rem;
  color: #27ae60;
  font-weight: bold;
}

/* 知识内容区域 */
.knowledge-content-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.content-header {
  margin-bottom: 30px;
}

.content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.content-title h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.content-icon {
  font-size: 2rem;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sort-select {
  padding: 8px 16px;
  border: 2px solid #e0e6ed;
  border-radius: 20px;
  background: white;
  color: #2c3e50;
  font-size: 0.9rem;
  cursor: pointer;
  outline: none;
}

.sort-select:focus {
  border-color: #3b82f6;
}

.knowledge-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.knowledge-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: white;
  border: 2px solid #e0e6ed;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.knowledge-item:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.item-thumbnail {
  position: relative;
  width: 120px;
  height: 80px;
  flex-shrink: 0;
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.thumbnail-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-icon {
  font-size: 2rem;
  color: #7f8c8d;
}

.item-type-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.item-content {
  flex: 1;
}

.item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.item-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  line-height: 1.3;
}

.item-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  transform: scale(1.1);
}

.favorite-btn.active {
  background: rgba(231, 76, 60, 0.1);
}

.action-icon {
  font-size: 1rem;
}

.item-description {
  font-size: 0.95rem;
  color: #7f8c8d;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.meta-left {
  display: flex;
  gap: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: #7f8c8d;
}

.meta-icon {
  font-size: 0.9rem;
}

.meta-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rating-stars {
  display: flex;
  gap: 2px;
}

.star {
  font-size: 1rem;
  color: #ddd;
}

.star.filled {
  color: #f39c12;
}

.rating-text {
  font-size: 0.85rem;
  color: #7f8c8d;
  font-weight: 500;
}

.view-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: #7f8c8d;
}

.view-icon {
  font-size: 0.9rem;
}

.item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.item-tag {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* 分页 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e0e6ed;
}

.page-btn {
  padding: 10px 20px;
  background: white;
  border: 2px solid #e0e6ed;
  border-radius: 20px;
  color: #2c3e50;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.page-btn:hover:not(:disabled) {
  border-color: #3b82f6;
  color: #3b82f6;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 0.9rem;
  color: #7f8c8d;
}

/* 侧边栏 */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.sidebar-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-icon {
  font-size: 1.3rem;
}

.hot-items,
.favorite-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hot-item,
.favorite-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: white;
  border: 1px solid #e0e6ed;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hot-item:hover,
.favorite-item:hover {
  border-color: #3b82f6;
  transform: translateY(-1px);
}

.hot-item-thumbnail {
  width: 60px;
  height: 40px;
  flex-shrink: 0;
}

.hot-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.hot-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hot-placeholder-icon {
  font-size: 1.2rem;
  color: #7f8c8d;
}

.hot-item-content,
.favorite-item-content {
  flex: 1;
}

.hot-item-title,
.favorite-item-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.hot-item-meta {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: #7f8c8d;
}

.hot-view-count,
.hot-rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.favorite-item-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.favorite-item-date {
  font-size: 0.8rem;
  color: #7f8c8d;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    order: -1;
  }
}

@media (max-width: 768px) {
  .knowledge-base-container {
    padding: 15px;
  }

  .page-title {
    font-size: 2rem;
  }

  .title-icon {
    font-size: 2.5rem;
  }

  .categories-section,
  .knowledge-content-section {
    padding: 20px;
  }

  .categories-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-item {
    flex-direction: column;
  }

  .item-thumbnail {
    width: 100%;
    height: 120px;
  }

  .filter-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }

  .filter-tab {
    padding: 8px 16px;
  }

  .content-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
</style>
